<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>

<s:bean name="com.google.code.openperfmon.web.common.MenuHelperBean" var="menu" />
<div id="mainMenu">
	<ul class='<s:property value="#menu.ulClass"/>'>
		<li id="menuliHome" class='<s:property value="#menu.mainClass('/')"/>'><s:a namespace="/" action="dashboard">Home</s:a></li>
		<li id="menuliAdmin" class='<s:property value="#menu.mainClass('/admin')"/>'><s:a namespace="/admin" action="listHosts">Administration</s:a></li>
	</ul>
	
	<div id="sumbenudivHome" class="subMenu" style='<s:property value="#menu.showSubs('/')"/>'>
		<s:a cssClass="%{#menu.subClass('/', 'dashboard')}" namespace="/" action="dashboard">Dashboard</s:a>
	</div>
	<div id="sumbenudivAdmin" class="subMenu" style='<s:property value="#menu.showSubs('/admin')"/>'>
		<s:a cssClass="%{#menu.subClass('/admin', 'listHosts')}" namespace="/admin" action="listHosts">Manage Hosts</s:a>
		<s:a cssClass="%{#menu.subClass('/admin', 'listMonitorDefinitions')}" namespace="/admin" action="listMonitorDefinitions">Manage Monitor Definitions</s:a>
		<s:a cssClass="%{#menu.subClass('/admin', 'listUsers')}" namespace="/admin" action="listUsers">Manage Users</s:a>
	</div>
</div>

<script type="text/javascript">
	$(function() {
		var mainMenu = $('div#mainMenu');
		$('#mainMenu > ul > li').each(
			function(idx) {
				var item = $(this); 
				if (item.hasClass('<s:property value="#menu.activeTab"/>')) {
					mainMenu.data('activeMenuTab', item); 
				}

				item.mouseenter(
				function () {
					var li = $(this);
					$('#mainMenu > ul > li').removeClass('<s:property value="#menu.selectedTab"/>');
					li.addClass('<s:property value="#menu.selectedTab"/>');
					var div = getDiv(li);
					$('div.subMenu').hide();
					div.show();
				});
			});

		mainMenu.mouseleave(function() {
			var li = mainMenu.data('activeMenuTab');
			$('#mainMenu > ul > li').removeClass('<s:property value="#menu.selectedTab"/>');
			li.addClass('<s:property value="#menu.selectedTab"/>');
			var div = getDiv(li);
			$('div.subMenu').hide();
			div.show();
		});
	});

	function getDiv(li) {
		var liId = li.attr('id');
		var divId = '#' + liId.replace("menuli", "sumbenudiv");
		return $(divId);
	}
</script>